import React from 'react';
import {HStack, Pressable, Text, View, VStack} from "@gluestack-ui/themed";
import {DataItemsProps, DataSwiperProps} from "@/components/data-panel/type";
import useTool from "@/utils";
import Swiper from "react-native-swiper";

const DataItems = ({list, data, actives, onClick, disabled}: DataItemsProps) => {
    const {hasMinus, numberFormatter} = useTool();
    return (
        <HStack
            flex={1}
            py={20}
            alignContent={"space-between"}
            flexWrap={"wrap"}
        >
            {list.map((item, index) => (
                <Pressable
                    disabled={disabled}
                    w={"33%"}
                    key={index}
                    onPress={() => onClick(item.field)}
                >
                    <VStack
                        w={"90%"}
                        h={100}
                        space={"xs"}
                        justifyContent={"center"}
                        alignItems={"center"}
                        bg={actives.includes(item.field) ? "#F8F9FB" : "transparent"}
                        borderRadius={6}
                    >
                        <Text size={"xs"} color={"#666"}>{item.label}</Text>
                        <Text size={"sm"} bold={true} color={"#333"}>{numberFormatter(data[item.field])}</Text>
                        <HStack alignItems={"center"}>
                            <Text size={"xs"} color={"$textLight950"}>环比</Text>
                            <Text size={"xs"} color={hasMinus(data[item.chain]) ? "#419E61" : "#DF3E34"}>
                                {hasMinus(data[item.chain]) ? "" : "+"}
                                {data[item.chain]}%
                            </Text>
                        </HStack>
                    </VStack>
                </Pressable>
            ))}
        </HStack>
    )
}

const Pagination = (index: number, total: number) => {
    const nums = Array.from({length: total}, (_, i) => i)
    return (
        <HStack justifyContent={"center"} mt={10}>
            <HStack
                w={nums.length * 12.5}
                h={5}
                overflow={"hidden"}
                borderRadius={5}
            >
                {nums.map(i => (
                    <Text
                        flex={1}
                        bg={index === i ? "$primary500" : "$primary100"}
                        key={i}
                    ></Text>
                ))}
            </HStack>
        </HStack>
    )
}

const DataSwiper = <L, >(props: DataSwiperProps<L>) => {
    const {blockSlice} = useTool();

    const {
        data,
        sliceNum,
        list,
        activeFields,
        disabled,
        onChange,
        ...attrs
    } = props;

    const columns = React.useMemo(() => {
        return blockSlice(list, sliceNum);
    }, [sliceNum, list]);

    return (
        <View
            flex={1}
        >
            <Swiper
                renderPagination={Pagination}
                bounces={true}
                loop={false}
                {...attrs}
            >
                {columns.map((col, index) => (
                    <VStack flex={1} key={index}>
                        {Array.isArray(col) &&
                            <DataItems
                                disabled={disabled}
                                actives={activeFields}
                                data={data}
                                list={col}
                                onClick={onChange}
                            ></DataItems>}
                    </VStack>
                ))}
            </Swiper>
        </View>

    );
};

export default DataSwiper;